<template>
  <view class="main">
    <view class="tips">
      <view class="tips-title">拍摄须知</view>
      <view class="tips-example">
        <image src="/static/example.png" mode="widthFix" />
        <view class="right">
          <view class="right-cell" v-for="(item, index) in tips" :key="index"
            ><text>{{ index + 1 }}</text> {{ item }}</view
          >
        </view>
        <!-- <ul>
          <li v-for="(item, index) in tips" :key="index">
            <text>{{ index + 1 }}</text> {{ item }}
          </li>
        </ul> -->
      </view>
      <image src="/static/exzpole.png" mode="widthFix" />
    </view>
    <view class="spec">
      <view class="spec-title">{{ specification.name }}</view>
      <view class="spec-box">
        <text class="spec-label">打印尺寸</text>
        <text class="spec-item"
          >{{ specification.mm[0] }} x {{ specification.mm[1] }}</text
        >
      </view>
      <view class="spec-box">
        <text class="spec-label">像素大小</text>
        <text class="spec-item"
          >{{ specification.px[0] }} x {{ specification.px[1] }}</text
        >
      </view>
      <view class="spec-box">
        <text class="spec-label">分辨率</text>
        <text class="spec-item">300DPI</text>
      </view>
      <view class="spec-box">
        <text class="spec-label">背景颜色</text>
        <view class="spec-item spec-color">
          <view
            class="color-item"
            v-for="item in color"
            :key="item"
            :style="{ backgroundColor: item }"
          ></view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view @click="handleAlbum" :style="{ backgroundColor: '#FB9638' }"
        >相册选择</view
      >
      <view @click="handleCamera" :style="{ backgroundColor: '#378BFB' }">相机拍摄</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tips: [
        "站白墙(纯色)前,光线充足均匀",
        "头部居中, 正对镜头",
        "露出眉毛和耳朵,面部无遮挡",
        "优先使用后置摄像头拍摄",
      ],
      color: [
        "#438EDB",
        "#FFFFFF",
        "#FF0000",
        "#20537E",
        "#CCE9FC",
        "#A5AABD",
        "#64C5FF",
        "#940113",
      ],
    };
  },
  computed: {
    specification() {
      return this.$store.state.specification;
    },
  },
  onLoad() {
    console.log(this.$store.state.specification);
  },
  methods: {
    handleAlbum() {
      // 打开相册选择照片
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          console.log('选择的图片路径：', res.tempFilePaths[0]);
          uni.navigateTo({
            url: `/pages/index/production?imagePath=${encodeURIComponent(res.tempFilePaths[0])}`,
            success: () => {
              console.log('页面跳转成功');
            },
            fail: (err) => {
              console.log('页面跳转失败：', err);
            }
          });
        },
        fail: (err) => {
          console.log('用户取消选择或出错', err);
        }
      });
    },
    handleCamera(){}
  },
};
</script>

<style scoped lang="scss">
.main {
  background-color: #f3f4f6;
  padding: 32rpx;
  box-sizing: border-box;
}
.tips {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  .tips-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}
.tips-example {
  margin-top: 24rpx;
  display: flex;
  margin-bottom: 24rpx;
  image {
    width: 200rpx;
  }
  .right {
    list-style: none;
    padding: 0;
    margin-left: 24rpx;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    flex-direction: column;
    .right-cell {
      flex: 1;
      display: flex;
      align-items: center;
      text {
        display: inline-block;
        background-color: #378bfb;
        color: #fff;
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12rpx;
      }
    }
  }
}

.spec {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-top: 24rpx;
  .spec-title {
    font-size: 32rpx;
    font-weight: bold;
    padding-bottom: 12rpx;
    border-bottom: 2rpx solid #eaeaea;
  }
  .spec-box {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    .spec-label {
      display: inline-block;
      width: 150rpx;
      font-size: 28rpx;
    }
    .spec-item {
      color: #999999;
      font-size: 28rpx;
    }
    .spec-color {
      display: flex;
      align-items: center;

      .color-item {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
        border-radius: 20rpx;
        border: 2rpx solid #e2e2e2;
      }
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 24rpx;
  width: 100%;
  padding: 12rpx 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  view {
    flex: 1;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 12rpx;
  }
}
</style>
